<template>
  <div class="gridlist-demo-container">
    <mu-grid-list class="gridlist-demo" :cols="cols">
      <mu-sub-header>{{title}} ></mu-sub-header>
      <mu-grid-tile v-for="item, index in list" :key="index" class="list">
        <img :src="item.picUrl"/>
        <span slot="title">{{item.name}}</span>
      </mu-grid-tile>
    </mu-grid-list>
  </div>
</template>

<script type="text/ecmascript-6">
  export default{
    data () {
      return {}
    },
    props: {
      list: {
        type: Array
      },
      title: '',
      cols: Number
    }
  }
</script>

<style>
 .mu-grid-list img{
   width: 100%;
   height: auto;
 }
 .recommend .mu-grid-tile-titlebar{
    background: #fff;
  }
 .recommend .mu-grid-tile-title{
   color: #000;
   font-size: 1rem;
 }
  .recommend .mu-grid-tile-titlebar{
    align-items: left
  }
 .recommend .mu-grid-tile-subtitle, .mu-grid-tile-title{
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   white-space: normal;
 }
  .recommend .mu-grid-tile-title-container{
    margin-left: 0;
  }
</style>
